<template>
  <div class="progress box clmcenter">
    <section>
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
      <div class="c4"></div>
    </section>
    <p class="progressbar">加载中...{{ percent }}</p>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "LoadingPage",
  data() {
    return {
      count: 0,
      percent: "",
      openid: this.$store.state.openid,
    };
  },
  mounted: function () {
    this.preload();
  },
  methods: {
    preload() {
      let chooseEat = require.context("../assets/img", false, /\.jpg|png$/);
      // 文件夹图片
      let chooseEatList = [];
      // 总数据
      let allList = [];
      for (var i = 0; i < chooseEat.keys().length; i++) {
        chooseEatList.push({
          id: 1,
          img: chooseEat.keys()[i].substr(2, chooseEat.keys()[i].length),
        });
      }
      allList = chooseEatList;
      // 合并数据
      // 根据层级追加目录路径前缀 1chooseEat 2end 3home 4lamp
      this.allList = allList;
      for (var b in allList) {
        var image = new Image();
        if (allList[b].id === 1) {
          image.src = require("../assets/img/" + allList[b].img);
        }
        // 图片加载
        image.onload = () => {
          this.count++;
          // 计算图片加载的百分数，绑定到percent变量
          let percentNum = Math.floor((this.count / this.allList.length) * 100);
          this.percent = `${percentNum}%`;
        };
      }
    },
  },

  watch: {
    count: function (val) {
      //console.log(val);
      if (val === 15) {
        // 图片加载完成后
        // this.getUserStatus();
        this.$router.replace("/main");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.progress {
  background: #fff;
  justify-content: center;
  p {
    font-size: 2rem;
    color: #000;
    padding-top: 1rem;
  }
  section {
    align-self: center;
    direction: rtl;
    .c4,
    .c3,
    .c2,
    .c1 {
      display: inline-block;
      position: relative;
      width: 1em;
      height: 1em;
      margin-left: 0.125em;
      margin-right: 0.125em;
    }

    .c4::after,
    .c3::after,
    .c2::after,
    .c1::after,
    .c4::before,
    .c3::before,
    .c2::before,
    .c1::before {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      border-radius: 50%;
    }

    .c4::before,
    .c3::before,
    .c2::before,
    .c1::before {
      bottom: -0.125rem;
      height: 50%;
      background-color: rgba(0, 0, 0, 0.1);
      transform: scale(0.5);
      -webkit-animation: shadow 1s linear infinite;
      animation: shadow 1s linear infinite;
    }

    .c4::after,
    .c3::after,
    .c2::after,
    .c1::after {
      top: 0;
      height: 100%;
      background-color: currentColor;
      -webkit-animation: jellijump 1s linear infinite;
      animation: jellijump 1s linear infinite;
    }

    .c1 {
      color: #afc7b9;
      font-size: 3.125rem;
    }

    .c1::before,
    .c1::after {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }

    .c2 {
      color: #fca89d;
      font-size: 2.5rem;
    }

    .c2::before,
    .c2::after {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .c3 {
      color: #fac7b4;
      font-size: 1.875rem;
    }

    .c3::before,
    .c3::after {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }

    .c4 {
      color: #ffe1c9;
      font-size: 1.25rem;
    }

    .c4::before,
    .c4::after {
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
    }

    @-webkit-keyframes jellijump {
      0%,
      5%,
      95%,
      100% {
        transform: translateY(-2.5rem);
      }
      20% {
        transform: translateY(-1.875rem);
      }
      40% {
        transform: translateY(-0.625rem);
      }
      45% {
        transform: translateY(-0.3125rem) scale(1, 0.875);
      }
      50% {
        transform: translateY(0) scale(1, 0.75);
      }
      60% {
        transform: translateY(-0.625rem) scale(0.75, 1);
      }
      80% {
        transform: translateY(-1.875rem) scale(1, 0.875);
      }
      90% {
        transform: translateY(-2.1875rem);
      }
    }

    @keyframes jellijump {
      0%,
      5%,
      95%,
      100% {
        transform: translateY(-2.5rem);
      }
      20% {
        transform: translateY(-1.875rem);
      }
      40% {
        transform: translateY(-0.625rem);
      }
      45% {
        transform: translateY(-0.3125rem) scale(1, 0.875);
      }
      50% {
        transform: translateY(0) scale(1, 0.75);
      }
      60% {
        transform: translateY(-0.625rem) scale(0.75, 1);
      }
      80% {
        transform: translateY(-1.875rem) scale(1, 0.875);
      }
      90% {
        transform: translateY(-2.1875rem);
      }
    }
  }
}
</style>
